<template>
  <el-dialog
    :before-close="beforeClose"
    :visible.sync="show"
    :title="title"
    width="740px"
    append-to-body
    @close="close"
    @closed="closed"
  >
    <!--    <div>-->
    <!--      <el-button type="success" @click="handleAdopt">通过</el-button>-->
    <!--      <el-button type="danger" @click="handleRefuse">拒绝</el-button>-->
    <!--    </div>-->
    <div class="k-box-flex k-mt-20">
      <!--            <div class="photo">-->
      <!--              <span>个人实名照片</span>-->
      <!--              <img src="" alt="">-->
      <!--            </div>-->
      <div class="k-flex-1">
        <el-descriptions title="" :column="1" size="small" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              姓名
            </template>
            {{ form.real_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              性别
            </template>
            {{ form.sex }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              年龄
            </template>
            {{ form.age }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              身份证号码
            </template>
            {{ form.id_card }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              手机号
            </template>
            {{ form.mobile }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline" />
              户籍地址
            </template>
            {{ form.card_province + form.card_city + form.card_area + form.card_street + form.card_address }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline" />
              现居地址
            </template>
            {{ form.live_province + form.live_city + form.live_area + form.live_street + form.live_address }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="k-ml-20  k-flex-1">
        <el-descriptions title="" :column="1" size="small" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              人才引进
            </template>
            {{ form.is_attract }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              就业情况
            </template>
            {{ form.employment }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              在职公司
            </template>
            {{ form.company_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              在职岗位
            </template>
            {{ form.company_job }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              工作时段
            </template>
            {{ form.job_time }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline" />
              公司地址
            </template>
            {{ form.company_province + form.company_city + form.company_area + form.company_street + form.company_address }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline" />
              工作状况
            </template>
            {{ form.job_status }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { ssqOptions, streetOptions, adminOptions } from '@/list/data'
import { detail } from '@/api/floating'
export default {
  name: 'Detail',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      show: false,
      ssqOptions,
      streetOptions,
      adminOptions,
      form: {
        age: '',
        id_card: '',
        mobile: '',
        created_time: '',
        deleted_time: '',
        employment: '',
        real_name: '',
        sex: '',
        updated_time: '',
        is_attract: '',

        card_address: '',
        card_area: '',
        card_city: '',
        card_province: '',
        card_street: '',

        company_address: '',
        company_area: '',
        company_city: '',
        company_job: '',
        company_name: '',
        company_province: '',
        company_street: '',

        job_status: '',
        job_time: '',

        live_address: '',
        live_area: '',
        live_city: '',
        live_province: '',
        live_street: ''

      }
    }
  },
  computed: {
    title() {
      const text = '详情'
      return text
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.show = val
        if (val) {
          this.getData()
        }
      }
    }
  },
  mounted() {
    this.show = this.visible
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    getData() {
      console.log('获取数据')
      detail(this.id).then(res => {
        console.log('获取结果', res)
        this.form = res.data
      })
    },
    handleClose() {
      console.log('点击关闭')
      this.beforeClose()
    },
    handleAdopt() {
      console.log('通过')
      this.$notify.success('通过')
      this.handleClose()
    },
    handleRefuse() {
      console.log('拒绝')
      this.$notify.error('拒绝')
      this.handleClose()
    },
    handleSubmit() {
      console.log('点击确定')
      this.$notify.success('保存成功')
      this.handleClose()
    },
    beforeClose() {
      console.log('关闭前的回调')
      this.show = false
      this.$emit('update:visible', false)
    },
    close() {
      console.log('关闭的回调')
    },
    closed() {
      console.log('关闭动画结束后的回调')
    }
  }
}
</script>

<style scoped>

</style>
